<template>
	<view class="custom-tabbar">
		<view class="tabbar-item" :class="{ active: currentPage === 'index' }" @click="switchPage('index')">
			<image :src="currentPage === 'index' ? '/static/tabbar/home-active.png' : '/static/tabbar/home.png'" mode="aspectFit"></image>
			<text>首页</text>
		</view>
		<view class="tabbar-item" :class="{ active: currentPage === 'category' }" @click="switchPage('category')">
			<image :src="currentPage === 'category' ? '/static/tabbar/category-active.png' : '/static/tabbar/category.png'" mode="aspectFit"></image>
			<text>分类</text>
		</view>
		<view class="tabbar-item" :class="{ active: currentPage === 'cart' }" @click="switchPage('cart')">
			<image :src="currentPage === 'cart' ? '/static/tabbar/cart-active.png' : '/static/tabbar/cart.png'" mode="aspectFit"></image>
			<text>购物车</text>
		</view>
		<view class="tabbar-item" :class="{ active: currentPage === 'my' }" @click="switchPage('my')">
			<image :src="currentPage === 'my' ? '/static/tabbar/mine-active.png' : '/static/tabbar/mine.png'" mode="aspectFit"></image>
			<text>我的</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CustomTabbar',
		props: {
			currentPage: {
				type: String,
				default: 'index'
			}
		},
		methods: {
			switchPage(page) {
				if (this.currentPage === page) return;
				
				const pageMap = {
					'index': '/pages/index/index',
					'category': '/pages/category/category',
					'cart': '/pages/cart/cart',
					'my': '/pages/my/my'
				};
				
				uni.navigateTo({
					url: pageMap[page],
					animationType: 'none'
				});
			}
		}
	}
</script>

<style lang="scss">
.custom-tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	display: flex;
	background-color: #ffffff;
	border-top: 1px solid #f0f0f0;
	z-index: 999;
	
	.tabbar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10rpx 0;
		
		image {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 5rpx;
		}
		
		text {
			font-size: 24rpx;
			color: #999;
		}
		
		&.active text {
			color: #ff6b6b;
		}
	}
}
</style> 